<template>
  <el-card class="box-card" shadow="never" style="width: 100%">
    <div class="top">
      <div style="line-height: 32px">
        <el-icon class="no-inherit"> <Search /> </el-icon>筛选搜索
      </div>
      <div>
        <el-button @click="reset(multipleTableRef)">重置</el-button>
        <el-button type="primary" @click="sreachR">查询结果</el-button>
      </div>
    </div>
    <el-form
      :model="form"
      label-width="120px"
      :inline="true"
      ref="multipleTableRef"
    >
      <el-form-item label="商品名称:">
        <el-input
          v-model="form.productName"
          style="width: 203px"
          placeholder="商品名称"
        />
      </el-form-item>
      <el-form-item label="状态推荐">
        <el-select
          v-model="form.recommendStatus"
          class="m-2"
          placeholder="全部"
          size="large"
        >
          <el-option label="推荐中" :value="1" />
          <el-option label="未推荐" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="never" class="box-card" style="width: 100%">
    <div class="data-list">
      <div style="line-height: 32px">
        <el-icon class="no-inherit"> <Tickets /> </el-icon>筛选搜索
      </div>
      <div>
        <el-button @click="changeDialogTableVisible">选择商品</el-button>
      </div>
    </div>
  </el-card>
  <!-- <el-card shadow="never" body-style="padding:0;border:none" class="box-card"> -->
  <el-table
    ref="multipleTableRef"
    :data="showTabel.tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    border
  >
    <el-table-column align="center" type="selection" width="55" />
    <el-table-column align="center" label="编号">
      <template #default="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column align="center" label="商品名称">
      <template #default="scope">
        {{ scope.row.productName }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="是否推荐">
      <template #default="scope">
        <el-switch
          v-model="scope.row.recommendStatus"
          :active-value="1"
          :inactive-value="0"
          @change="hotSwitch(scope.row.id, scope.row.recommendStatus)"
        >
        </el-switch
      ></template>
    </el-table-column>
    <el-table-column align="center" label="排序">
      <template #default="scope">{{ scope.row.sort }}</template>
    </el-table-column>
    <el-table-column align="center" label="状态">
      <template #default="scope">{{
        scope.row.recommendStatus == 1 ? "推荐中" : "未推荐"
      }}</template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button text type="primary" @click="dialogTableVisible2 = true"
          >编辑</el-button
        >
        <el-button text type="primary" @click="delPro(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- </el-card> -->
  <!-- 选择商品 -->
  <el-dialog v-model="dialogTableVisible" title="选择商品">
    <el-input>
      <template #append>
        <el-button>
          <el-icon><Search /></el-icon>
        </el-button>
      </template>
    </el-input>
    <el-table :data="tableData2.dataList">
      <el-table-column type="selection" width="55" />
      <el-table-column property="date" label="商品名称">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column property="name" label="货号">
        <template #default="scope"> NO.{{ scope.row.productSn }} </template>
      </el-table-column>
      <el-table-column property="address" label="价格">
        <template #default="scope"> {{ scope.row.price }} </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible2 = false">取消</el-button>
        <el-button type="primary" @click="dialogTableVisible2 = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 设置排序 -->
  <el-dialog v-model="dialogTableVisible2" title="设置排序" width="30%">
    <div style="text-align: center">
      排序: <el-input v-model="setSort" style="width: 220px"> </el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible2 = false">取消</el-button>
        <el-button type="primary" @click="dialogTableVisible2 = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div class="bottom">
    <div>
      <el-select v-model="batchOption">
        <el-option label="设为推荐" value="1" />
        <el-option label="取消推荐" value="2" />
        <el-option label="删除" value="3" />
      </el-select>
      <el-button
        style="margin-left: 10px"
        type="primary"
        @click="batchAction"
        :disabled="batchOption === '' ? true : false"
        >确定</el-button
      >
    </div>
    <div>
      <el-pagination
        v-model:current-page="showTabel.pagination.pageNum"
        v-model:page-size="showTabel.pagination.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="showTabel.pagination.total"
        @size-change="showTabel.handleSizeChange"
        @current-change="showTabel.handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import { addProduct } from "../../request/api";
import useTabel from "../../hooks/useTables";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElTable, FormInstance } from "element-plus";
import { actionTip } from "../../utils/actionTip";
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
let router = useRouter();
const form = reactive({
  productName: "",
  recommendStatus: "",
});

const handleSelectionChange = (val: any) => {
  console.log(1);
};

const value5 = ref("");

let {
  tableData,
  getTableData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTabel(addProduct.recommendProduct);
console.log(tableData);

const showTabel = reactive({
  tableData: tableData,
  getTableData: getTableData,
  pagination: pagination,
  handleSizeChange: handleSizeChange,
  handleCurrentChange: handleCurrentChange,
} as any);

let toAddPro = () => {
  router.push("/pms/addProduct");
};

const reset = (formEl: any) => {
  form.productName = "";
  form.recommendStatus = "";
};

let sreachR = () => {
  let newHook = useTabel(addProduct.recommendProduct, {
    productName: form.productName,
    recommendStatus: form.recommendStatus,
  });
  showTabel.tableData = newHook.tableData;
  showTabel.getTableData = newHook.getTableData;
  showTabel.pagination = newHook.pagination;
  showTabel.handleSizeChange = newHook.handleSizeChange;
  showTabel.handleCurrentChange = newHook.handleCurrentChange;
};

let delPro = (ids: number) => {
  ElMessageBox.confirm("确定删除吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      addProduct
        .delPro(ids)
        .then(() => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getTableData();
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "删除失败",
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 弹出框
const dialogTableVisible = ref(false);
const dialogTableVisible2 = ref(false);
let tableData2 = reactive({
  dataList: [],
} as any);
let changeDialogTableVisible = () => {
  dialogTableVisible.value = true;
  let res = useTabel(addProduct.proPageList);
  tableData2.dataList = res.tableData;
  console.log(res);
};

const setSort = ref(0);

let hotSwitch = (ids: number, recommendStatus: number) => {
  addProduct
    .hotRecommendStatus({
      ids,
      recommendStatus,
    })
    .then((res) => {
      console.log(res);
      ElMessage({
        type: "success",
        message: "修改成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "修改失败",
      });
    });
};

// 批量处理逻辑
let batchOption = ref("");
let batchAction = () => {
  if (batchOption.value) {
    let rows = multipleTableRef.value!.getSelectionRows();
    if (rows.length > 0) {
      let idsArr = [] as number[];
      rows.forEach((i: any) => {
        idsArr.push(i.id);
      });
      switch (batchOption.value) {
        // 设为推荐
        case "1":
          actionTip(
            addProduct.hotRecommendStatus,
            {
              ids: idsArr.join(),
              recommendStatus: 1,
            },
            showTabel.getTableData
          );
          return;
        // 取消推荐
        case "2":
          actionTip(
            addProduct.hotRecommendStatus,
            {
              ids: idsArr.join(),
              recommendStatus: 0,
            },
            showTabel.getTableData
          );
          return;
        // 移入回收站
        case "3":
          actionTip(
            addProduct.deleteHotRecommend,
            {
              ids: idsArr.join(),
              deleteStatus: 1,
            },
            showTabel.getTableData
          );
          return;
        default:
          ElMessage({
            type: "error",
            message: "数据异常",
          });
          return;
      }
    } else {
      ElMessage({
        type: "warning",
        message: "请先选择要操作的数据",
      });
    }
  } else {
    ElMessage({
      type: "warning",
      message: "请先选择操作",
    });
  }
};
</script>

<style lang="scss" scoped>
.el-icon {
  padding-top: 0 !important;
}
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.data-list {
  display: flex;
  justify-content: space-between;
}
.el-icon {
  padding-top: 5px;
  vertical-align: baseline;
}
.box-card {
  margin-bottom: 20px;
}
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.breadcrumb {
  margin-bottom: 20px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
</style>
